<div>
  <div class="col-sm-12 form-section-title"> Macvlan configuration </div>
  <!-- selector -->
  <div class="form-group">
    <span class="col-sm-12 text-muted small">
      <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
      To create a MACVLAN network you need to create a configuration, then create the network from this configuration.
    </span>
  </div>
  <div class="col-sm-12">
    <div class="form-group" style="margin-bottom: 0">
      <div class="boxselector_wrapper">
        <div>
          <input type="radio" id="network_config" ng-model="$ctrl.data.Scope" value="local" />
          <label for="network_config">
            <div class="boxselector_header">
              <i class="fa fa-cog" aria-hidden="true" style="margin-right: 2px"></i>
              Configuration
            </div>
            <p>I want to configure a network before deploying it</p>
          </label>
        </div>
        <div>
          <input type="radio" id="network_deploy" ng-model="$ctrl.data.Scope" value="swarm" ng-disabled="$ctrl.availableNetworks.length === 0" />
          <label for="network_deploy" ng-class="$ctrl.availableNetworks.length === 0 ? 'boxselector_disabled' : ''">
            <div class="boxselector_header">
              <i class="fa fa-sitemap" aria-hidden="true" style="margin-right: 2px"></i>
              Creation
            </div>
            <p>I want to create a network from a configuration</p>
          </label>
        </div>
      </div>
    </div>
  </div>
  <!-- !selector -->

  <ng-form name="macvlanConfigurationForm">
    <!-- configuration-inputs -->
    <div ng-show="$ctrl.data.Scope === 'local'">
      <!-- network-card-input -->
      <div class="form-group">
        <label for="network_card" class="col-sm-3 col-lg-2 control-label text-left">Parent network card</label>
        <div class="col-sm-9 col-lg-10">
          <input
            type="text"
            class="form-control"
            name="network_card"
            ng-model="$ctrl.data.ParentNetworkCard"
            placeholder="e.g. eth0 or ens160 ..."
            ng-required="$ctrl.data.Scope === 'local' && !$ctrl.data.ParentNetworkCard"
          />
        </div>
      </div>
      <div class="form-group" ng-show="macvlanConfigurationForm.network_card.$invalid">
        <div class="col-sm-12 small text-warning">
          <div ng-messages="macvlanConfigurationForm.network_card.$error">
            <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Parent network card must be specified.</p>
          </div>
        </div>
      </div>
      <!-- network-card-input -->
      <!-- nodes-selector -->
      <div ng-if="$ctrl.applicationState.endpoint.mode.agentProxy && $ctrl.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
        <div class="form-group">
          <div class="col-sm-12">
            <macvlan-nodes-datatable
              title-text="Select the nodes where you want to deploy the local configuration"
              title-icon="fa-hdd"
              dataset="$ctrl.nodes"
              table-key="nodes"
              state="$ctrl.data.DatatableState"
              order-by="Hostname"
              show-ip-address-column="$ctrl.applicationState.endpoint.apiVersion >= 1.25"
              access-to-node-details="$ctrl.isAdmin"
              name="node_selector"
              ng-model="tmp"
              ng-required="$ctrl.requiredNodeSelection()"
            ></macvlan-nodes-datatable>
          </div>
        </div>
        <div class="form-group" ng-show="macvlanConfigurationForm.node_selector.$invalid">
          <div class="col-sm-12 small text-warning">
            <div ng-messages="macvlanConfigurationForm.node_selector.$error">
              <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> At least one node must be selected.</p>
            </div>
          </div>
        </div>
      </div>
      <!-- !nodes-selector -->
    </div>
    <!-- configuration-inputs -->
    <!-- deploy-inputs -->
    <div ng-show="$ctrl.data.Scope === 'swarm'">
      <!-- configuration-selector -->
      <!-- network-input -->
      <div class="form-group">
        <label for="config_network" class="col-sm-2 col-lg-1 control-label text-left">Configuration</label>
        <div class="col-sm-9">
          <select
            class="form-control"
            ng-options="net.Name for net in $ctrl.availableNetworks"
            ng-model="$ctrl.data.SelectedNetworkConfig"
            name="config_network"
            ng-required="$ctrl.requiredConfigSelection()"
          >
            <option selected disabled hidden value="">Select a network</option>
          </select>
        </div>
      </div>
      <!-- !network-input -->
      <div class="form-group" ng-show="macvlanConfigurationForm.config_network.$invalid">
        <div class="col-sm-12 small text-warning">
          <div ng-messages="macvlanConfigurationForm.config_network.$error">
            <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Select a configuration network.</p>
          </div>
        </div>
      </div>
      <!-- !configuration-selector -->
    </div>
    <!-- deploy-inputs -->
  </ng-form>
</div>
